<template>
  <div class="district-page">
    <!-- 第一行 -->
    <div class="row-1">
      <div class="col-1">
        <!-- <AssuranceHouseRatio :list="districtInfo.assuranceInfo" /> -->
        <WorkOrder
          title="当月投诉单总量"
          class="district-page__complaint-order-list"
          :list="districtInfo.complaintOrderList"
        />
        <ReconstructionInfo :list="districtInfo.communityReconstruction" />
        <IllInfo :data="districtInfo.illInfo" />
      </div>
      <div class="col-2">
        <div class="col-2__header">
          <MenuList />
          <DistrictSummary :data="districtInfo.summary" />
        </div>
        <div class="col-2__footer">
          <AssuranceHouseRatio
            :pie-list="districtInfo.assuranceInfo"
            :rotate-list="districtInfo.assuranceInfo2"
          />
          <PublicConstruction :data="districtInfo.publicInfo" />
        </div>
      </div>
      <div class="col-3">
        <PropertyRank :list="districtInfo.propertyRankList" />
        <AgencyRank :list="districtInfo.agencyRankList" />
        <PriceInfo :list="districtInfo.priceInfo" />
      </div>
    </div>
  </div>
</template>

<script>
import PropertyRank from './components/PropertyRank.vue'
import AgencyRank from './components/AgencyRank.vue'
import AssuranceHouseRatio from './components/AssuranceHouseRatio.vue'
import IllInfo from './components/IllInfo.vue'
import PriceInfo from './components/PriceInfo.vue'
import PublicConstruction from './components/PublicConstruction.vue'
import ReconstructionInfo from './components/ReconstructionInfo.vue'
import DistrictSummary from './components/Summary.vue'
import MenuList from './components/Menu.vue'
import WorkOrder from '@/views/property/components/WorkOrder.vue'
export default {
  components: {
    PropertyRank,
    AgencyRank,
    AssuranceHouseRatio,
    IllInfo,
    PriceInfo,
    PublicConstruction,
    ReconstructionInfo,
    DistrictSummary,
    MenuList,
    WorkOrder
  },
  data () {
    return {
    }
  },
  beforeCreate () {
    this.$http.get("mockConfig.json").then(res => {
      this.$store.commit('SET_DISTRICT_INFO', res.body.districtInfo)
    })
  },
  computed: {
    districtInfo () {
      return this.$store.getters.districtInfo
    }
  }
}
</script>

<style lang="scss">
.district-page {
  height: 100%;
  width: 100%;
  pointer-events: none;
  padding: 0 $base * 10px $base * 10px $base * 10px;
  .row-1 {
    display: flex;
    height: 100%;
    .col-1 {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding-top: $base * 77px;
      box-sizing: border-box;
    }
    .col-2 {
      flex: 1;
      justify-content: space-between;
      display: flex;
      flex-direction: column;
      // padding: $base*20px $base*10px 0 $base*10px;
      padding: $base * 20px 0 0 0;
      align-items: center;

      .col-2__footer {
        width: 100%;
        display: flex;
        justify-content: space-between;
      }
    }
    .col-3 {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
  }

  .property-compaint-order {
    margin-top: $base * 10px;
  }

  .district-page__complaint-order-list {
    width: $base * 360px;
    height: $base * 325px;
  }

  .content-box-title {
    font-size: $base * 18px;
  }
}
</style>